﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="~/Content/js/jquery/jquery-1.12.1.min.js"></script>
    <script type="text/javascript">
        var ws;
        $().ready(function () {
            $('#conn').click(function () {
                ws = new WebSocket('ws://' + window.location.hostname + ':' + window.location.port + '/demo/startwebsocketserver');
                $('#tips').text('正在连接');
                ws.onopen = function () {
                    $('#tips').text("").append("已经连接<br/>");
                }
                ws.onmessage = function (evt) {
                    $('#tips').append(evt.data + "<br/>");
                }
                ws.onerror = function (evt) {
                    $('#tips').append(JSON.stringify(evt) + "<br/>");
                }
                ws.onclose = function () {
                    $('#tips').append("已经关闭<br/>");
                }
            });

            $('#close').click(function () {
                ws.close();
            });

            $('#send').click(function () {
                if (ws.readyState == WebSocket.OPEN) {
                    ws.send($('#content').val());
                }
                else {
                    $('#tips').append('连接已经关闭');
                }
            });

        });
    </script>
</head>
<body>
    <div>
        <div>
            <input id="conn" type="button" value="连接" />
            <input id="close" type="button" value="关闭" />
        </div>
        <div>
            <input id="content" type="text" />
            <input id="send" type="button" value="发送" />
        </div>
        <div id="tips">

        </div>
    </div>
</body>
</html>
